<template>
  <div class="mainContainer">
    <img class="background" src="../assets/login/background.jpg"/>
    <div class="findbackPasswordFirst">
      <h1 class="title">找回密码</h1>
      <div>
        <span class="label" style="margin-left: 10%">邮箱地址：</span>
        <el-input class="input" v-model="mailAddr"></el-input>
      </div>
      <el-button style="margin-left: 15%; margin-top:30px" class="submit" type="primary" @click="done">发送邮件</el-button>
    </div>
  </div>
</template>

<script>
import findbackPassword from '@/api/findback_password'
export default {
  name: "findback-password-first",
  data () {
    return {
      mailAddr: ''
    }
  },
  methods: {
    done: function () {
      findbackPassword.sendEmail(this, this.mailAddr)
      this.$router.push('/findbackPasswordSecond')
    }
  }
}
</script>

<style scoped>
  .mainContainer{
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
  }
  .background{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    filter: blur(1px);
  }
  .login{
    width: 400px;
    height: 700px;
    background: white;
    border-radius: 15px;
    border: 1px solid #AEAEAE;
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 2px 2px 20px #888;
  }
  .title{
    text-align: center;
    font-weight: normal;
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  }
  .inputs{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;
  }
  .input{
    margin-top: 10px;
    width: 200px;
    float: none;
    overflow: visible;
  }
  .label{
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    text-align: left;
    margin-right: 20px;
  }
  .submit{
    margin-top: 10px;
    width: 70%;
  }
  .register-link{
    margin-top: 10px;
    margin-left: 76%;
  }
  .label-resend{
    float: left;
  }
  .findbackPasswordFirst{
    width: 400px;
    height: 700px;
    background: white;
    border-radius: 15px;
    border: 1px solid #AEAEAE;
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 2px 2px 20px #888;
  }
</style>
